<template>
  <el-col :span="24">
    <el-form label-width="99px" :rules="rules" ref="editForm" :model="editForm">
      <el-row type="flex" justify="right">
        <el-col :span="8">
          <el-form-item label="职位" prop="name">
            <el-input v-model="editForm.name" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="职位要求" prop="require">
            <div :id="editForm.id" style="height: 350px;width: 100%">
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button class="el-col el-col-5" type="primary" @click="submitForm('editForm')">提交</el-button>
    </el-row>
  </el-col>
</template>
<script>
  import axios from 'axios'
  import E from 'wangeditor'
  export default{
    components: {
      E
    },
    name: 'Edit',
    data () {
      return {
        editorContent: ''
      }
    },
    props: {
      editForm: Object,
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      },
      rules: Object
    },
    mounted () {
      var div = document.getElementById(this.editForm.id)
      var editor = new E(div)
      editor.customConfig.zIndex = 1995
      editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
//    editor.customConfig.uploadImgShowBase64 = true
      editor.customConfig.uploadImgServer = `${this.BASE_URL}/news/get`
      editor.customConfig.uploadImgHeaders = {
        'Accept': 'text/x-json'
      }
      editor.customConfig.uploadFileName = 'images'
      editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          var url = result.data
          insertImg(url)

          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      editor.create()
      editor.txt.html(this.editForm.require)
      this.editorContent = this.editForm.require
    },
    methods: {
      submitForm (formName) {
        if (this.editorContent === '') {
          this.editForm.require = ''
        } else {
          this.editForm.require = this.editorContent
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.update()
          }
        })
      },
      update () {
        axios({
          method: 'post',
          url: `${this.BASE_URL}/jobb/refresh`,
          responseType: 'application/json',
          data: {
            require: this.editForm.require,
            name: this.editForm.name,
            id: this.editForm.id
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message({
              showClose: true,
              message: '提交失败',
              type: 'error'
            })
          }
        }).catch(() => {
          this.loading = false
          this.$message.error('服务器异常')
        })
      }
    }
  }
</script>
<style scoped>
  /*.el-row {*/
  /*margin-bottom: 30px;*/
  /*}*/
</style>

